<!--  -->
<template>
  <div>
    <el-container class="screening-box">
      <el-form
        :inline="true"
        class="form"
        ref="form"
        label-position="right"
        label-width="100px"
      >
        <el-header class="screening-head">
          <div class="title">
            <i class="el-icon-search el-icon--left"></i>筛选查询
          </div>
          <div>
            <span class="toggle" v-show="showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-up el-icon--left"></i>收起筛选
            </span>
            <span class="toggle" v-show="!showScreening" @click="showScreening=!showScreening">
              <i class="el-icon-arrow-down el-icon--left"></i>展开筛选
            </span>
            <el-button
              class="tlwok-btn"
              type="primary"
              @click="getList"
            >查询</el-button>
            <el-button class="tlwok-btn" type="primary" plain @click="searchName = ''">重置</el-button>
          </div>
        </el-header>
        <el-main class="screening-body" v-show="showScreening">
          <el-form-item label="搜索账户：" prop="userName">
            <el-input v-model.trim="searchName" placeholder="请输入账户"></el-input>
          </el-form-item>
        </el-main>
      </el-form>
    </el-container>

    <div class="table-box">
      <div class="table-title">
        <span class="title">
          <i class="el-icon-notebook-2 el-icon--left"></i>管理员账户
        </span>
        <div>
          <el-button
            class="filing-button"
            type="primary"
            icon="el-icon-plus"
            @click="addAdmin"
          >添加管理员</el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="tableHeaderColor"
        :cell-style="tableCellStyle"
      >
        <el-table-column prop="name" label="管理员账户" width="180"></el-table-column>
        <el-table-column label="账户级别" width="140">
          <template slot-scope="scope">{{scope.row.type | adminTypeFilter}}</template>
        </el-table-column>
        <el-table-column  label="创建时间" width="180">
          <template slot-scope="scope">
            {{formatDate(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="primary" @click="alterPassword(scope.row.id)">修改密码</el-button>
            <el-button type="primary" :disabled="scope.row.type == -1" @click="toPowerPage(scope.row.id , scope.row.name)">分配权限</el-button>
            <el-button type="primary" :disabled="scope.row.type == -1" @click="delAdmin(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-handler" v-if="tableData.length>0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.startPage"
          :page-sizes="pageInfo.pageSizeArr"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>


    <el-dialog
      title="修改密码"
      :visible.sync="altPasswordDialogVisible"
      center
    >
      <el-form
        :validate-on-rule-change="false"
        :inline-message="true"
        ref="userInfoForm"
        class="user-info-form"
        label-width="150px"
      >
        <el-form-item label="新密码：" prop="id">
          <el-input v-model.trim="altPasswordData.new" type="password" placeholder="请输入新密码"></el-input>
          <div style="line-height:1;padding-top: 5px;">至少6字符，中英文不限</div>
        </el-form-item>
        <el-form-item label="确定密码：" prop="phone">
          <el-input v-model.number="altPasswordData.sure" type="password" placeholder="请再次输入密码"></el-input>
          <div style="line-height:1;padding-top: 5px;">至少6字符，中英文不限</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="altPasswordDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="toAlterPassword"
        >确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog
      title="添加管理员"
      :visible.sync="addAdminDialogVisible"
      center
    >
      <el-form
        :validate-on-rule-change="false"
        :inline-message="true"
        ref="userInfoForm"
        class="user-info-form"
        label-width="150px"
      >
        <el-form-item label="管理员账户：" prop="name">
          <el-input v-model.trim="addAdminData.name" placeholder="请输入管理员账户"></el-input>
        </el-form-item>

        <el-form-item label="密码:" prop="password">
          <el-input v-model.trim="addAdminData.password" placeholder="请输入密码"></el-input>
          <div style="line-height:1;padding-top: 5px;">至少6字符，中英文不限</div>
        </el-form-item>
        <el-form-item label="确定密码：" prop="sure">
          <el-input v-model.number="addAdminData.sure" placeholder="请再次输入密码"></el-input>
          <div style="line-height:1;padding-top: 5px;">至少6字符，中英文不限</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="addAdminDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="toAddAdmin"
        >确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import md5 from 'js-md5'
export default {
  name: 'Role',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  filters:{
    adminTypeFilter(val){
      return val == -1? '超级管理员' : '一般管理员'
    }
  },
  data() {
    //这里存放数据
    return {
        tableData : [],
        pageInfo: {
            total: 0,
            pageSizeArr: [10, 20, 30, 40],
            size: 10, //分页页面数量大小
            startPage: 1 //开始页码
        },
        searchName : '',
        showScreening: true,
        altPasswordDialogVisible : false,
        altPasswordData : {
            userId : 0,
            new : '' ,
            sure : ''
        },
        addAdminDialogVisible : false,
        addAdminData : {
            name : '',
            password : '',
            sure :''
        },

    }
  },

  mounted() {
    this.getList()
  },
  //方法集合
  methods: {
      toPowerPage(id , name){
          this.$router.push({ path: 'Power', query: { id: id , name : name }})
      },
      delAdmin(item) {
          let userId = item.id
          this.$confirm(`确定删除【${item.name}】管理员吗？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              if(userId){
                  this.$axios.post(
                      `/api/manage/admin/del`,
                      `id=${userId}`
                  ).then(res => {
                      if (res.success) {
                          this.$message.success("删除成功")
                          this.search()
                      } else this.$message.error(res.desc)
                  })
              }
              else {
                  this.$message.error('管理员ID错误');
              }
          })
      },
      toAddAdmin(){
          if(this.addAdminData.name.length < 1) {
              this.$message.error("管理员账户必须大于2位")
              return;
          }
          if(this.addAdminData.password.length < 6) {
              this.$message.error("密码必须大于5位")
              return;
          }
          if(this.addAdminData.password != this.addAdminData.sure) {
              this.$message.error("两次密码输入不相同")
              return;
          }

          this.$axios.post(
              `/api/manage/admin/add`,
              `name=${this.addAdminData.name}&password=${md5(this.addAdminData.password)}`
          ).then(res => {
              if (res.success) {
                  this.$message.success("管理员添加成功")
                  this.addAdminDialogVisible = false;
                  this.search()
              } else this.$message.error(res.desc)
          })
      },
      addAdmin(){
          this.addAdminData.name = ''
          this.addAdminData.password = ''
          this.addAdminData.sure = ''
          this.addAdminDialogVisible = true
      },
      alterPassword(userId) {
        this.altPasswordData.userId = userId
          this.altPasswordData.new = ''
          this.altPasswordData.sure = ''
          this.altPasswordDialogVisible = true
      },
      toAlterPassword(){
        if(this.altPasswordData.new.length < 6) {
            this.$message.error("密码必须大于5位")
            return;
        }
          if(this.altPasswordData.new != this.altPasswordData.sure) {
              this.$message.error("两次密码输入不相同")
              return;
          }
          let password = md5(this.altPasswordData.sure.toString())
          this.$axios.post(
              `/api/manage/admin/altPasswordAdmin`,
              `id=${this.altPasswordData.userId}&password=${password}`
          ).then(res => {
                  if (res.success) {
                      this.$message.success("密码修改成功")
                      this.altPasswordDialogVisible = false;
                  } else this.$message.error(res.desc)
              })

      },
      search : function() {
          this.pageInfo = {
              total: 0,
                  pageSizeArr: [10, 20, 30, 40],
                  size: 10, //分页页面数量大小
                  startPage: 1 //开始页码
          };
          this.getList()
      },
    getList : function () {
        this.$axios.post(
                `/api/manage/admin/getList?size=${this.pageInfo.size}&startPage=${this.pageInfo.startPage}`,
                "name=" + this.searchName
            )
            .then(res => {
                if (res.success) {
                    this.pageInfo.total = res.result.total
                    this.pageInfo.size = res.result.pageSize
                    this.tableData = res.result.list
                } else this.$message.error(res.desc)
            })
    },
      // 分页数量大小设置
      handleSizeChange(val) {
          this.pageInfo.size = val
          this.pageInfo.startPage = 1
          this.getList()
      },
      // 分页当前页设置
      handleCurrentChange(val) {
          this.pageInfo.startPage = val
          this.getList()
      },
      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          return 'background-color: #f5f5f5;color: #333;font-weight: bold;text-align:center'
      },
      // 修改table tr行的样式
      tableCellStyle({ row, column, rowIndex, columnIndex }) {
          return 'text-align:center'
      },
  }
}
</script>


<style lang="less" scoped>
  .title {
    font-weight: bold;
  }
  .grey {
    color: #bbb;
  }
  .red {
    color: red;
  }
  .screening-box {
    border: 1px solid #ddd;
    .form {
      width: 100%;
    }
  }
  .screening-head {
    background: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toggle {
      cursor: pointer;
      margin-right: 50px;
    }
  }
  .screening-body {
    border-top: 1px solid #ddd;
  }
  .btn-box {
    margin-top: 40px;
    .number {
      color: red;
    }
    .el-button--primary {
      .number {
        color: #fff;
      }
    }
  }
  .table-title {
    height: 47px;
    line-height: 47px;
    padding: 0 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .filing-button {
      margin-left: 30px;
    }
  }
  .table-box {
    border: 1px solid #ddd;
    margin-top: 30px;
    .el-tag {
      margin: 2px;
      cursor: default;
    }
  }
  .table-handler {
    padding: 5px 15px;
    text-align: right;
    .check-all {
      margin-right: 20px;
    }
  }
  .hasEdit {
    position: absolute;
    top: 0;
    left: 0;
    &::before {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 30px solid red;
      border-right: 30px solid transparent;
    }
    .text {
      position: absolute;
      top: -3px;
      left: 2px;
      color: #fff;
      font-size: 12px;
    }
  }
  .user-info-form {
    .el-select,
    .el-input {
      width: 300px;
    }
    .tags {
      width: 450px;
    }
    .el-tag {
      cursor: pointer;
      margin-right: 15px;
    }
  }
  .tags-dialog {
    .el-tag {
      margin-right: 15px;
      margin-bottom: 15px;
      &:last-child {
        margin-right: 30px;
      }
    }
    .button-new-tag {
      margin-bottom: 15px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
      color: #5aa3e5;
      border-color: #bddaf5;
      background: #eff6fc;
      &:focus,
      &:hover {
        color: #fff;
        background: #5aa3e5;
        border-color: #5aa3e5;
      }
    }
    .input-new-tag {
      width: 90px;
      margin-bottom: 15px;
      vertical-align: bottom;
    }
  }
  .upload-box {
    display: inline-block;
  }
</style>
<style>
  .input-new-tag .el-input__inner:focus {
    border-color: #bddaf5;
  }
</style>
